<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
	*{
		margin:0;
		padding: 0;
	}
	/*#div1{
		width: 500px;
		height: 500px;
		background-color: red;
		position: relative;
		left: 200px;

	}
*/
body{
	height: 2000px;
}

#div6{
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}
#div2{
	width: 200px;
	height: 200px;
	background-color: pink;
	position: relative;
	left:400px;

}
#div3{
	width: 200px;
	height: 200px;
	background-color: yellow;
	position: absolute;
	left:400px;
}
#div4{
	width: 200px;
	height: 200px;
	background-color: cyan;
	/*position: absolute;*/
/*	left:300px*/;
	}
	#div5{
		width: 200px;
		height: 200px;
		background-color: red;
	}
	#div6{
		width: 600px;
		height: 600px;
		background-color: pink;

	}
	#div7{
		width: 500px;
		height: 500px;
		background-color: red;
		
	}
	#div8{
		width: 400px;
		height: 400px;
		background-color: yellow;
	
	}
	#div9{
		width: 200px;
		height: 200px;
		background-color: cyan;
		/*position: absolute;*/
		left:100px;
		position: fixed;
	}
	#div10{
		width: 200px;
		height: 200px;
		background-color: pink;
		position: fixed;
		left: 300px;

	}
	#div11{
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	#p1{
		width: 1980px;
		height: 100px;
		background-color: pink;
		position: fixed;
		z-index: 2;
	}
	#p2{
		width: 200px;
		height: 200px;
		background-color: yellow;
		position: absolute;
		top: 100px;
	}
	</style>
</head>
<body>
	<!-- 
	定位:
	position
	对元素的位置进行精确的调整
	定位一共有四个值:
	1.静态定位 static
	2.相对定位 relative
	3.绝对定位 absolute
	4.固定定位 fixed
	以上四个值只是规定了元素定位的方式,具体元素该移动到哪里,需要通过left,right,top,bottom四个css样式决定.表示的意思是距离当前方位有多少px距离
	注意:left,right,top.bottom四个css样式只对设置了非static的定位元素起效果!!!

	 -->
	
	<!-- static 静态定位 默认值 -->
	<!-- <div id="div1"></div> -->
	<!-- relative 相对定位 
	1.相对定位的元素不完全脱离文档流,不会失去自己的位置
	2.相对定位的元素移动的参考位置是自己之前的位置-->
	<!-- <div id="div2"></div>
	<div id="div3"></div> -->
	<!-- absolute 绝对定位 
1.绝对定位的元素完全脱离文档流,会失去自己的位置
2.绝对定位的元素移动的参考是距离她最近的设置了
	非static定位的祖先元素,如果所有祖先元素都设置了非static定位,则相对于整个html文档定位


	注意:以后如果给一个元素设置了绝对定位,一般情况,我们会给元素的父级添加相对定位
-->
	<!-- <div id="div4"></div>
	<div id="div5"></div>

 -->
<!--  <div id="div6">
 	<div id="div7">
 		<div id="div8">
 			<div id="div9"></div>
 		</div>
 	</div>
 </div> -->
 <!-- fixed  固定定位 
1.固定定位的元素完全脱离文档流,会失去自己之前的位置.
2.固定定位的元素移动的参考位置是整个html文档-->
<!-- <div id="div10"></div>
<div id="div11"></div> -->
<!-- 非static定位的元素层级高于普通元素,如果元素都因为定位脱离文档流,层级高低取决于书写顺序,后写的覆盖先写的 -->

<!-- z-index
该样式只对非static定位的元素起效果,默认值0,值越大越靠近z轴正方向 -->
<div id="p1"></div>
<div id="p2"></div>



















</body>
</html>